<template>
	<view class="content">
		<view class="text-area"><tabber></tabber></view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<u-tabbar v-model="tabberIndex" @change="changeTabber" active-color="#5098FF" :list="tabberList"></u-tabbar>
	</view>
</template>

<script>
// 引入vuex
import { mapState, mapMutations, mapActions } from 'vuex';
import Tabber from '../../common/tabber/tabber';
export default {
	name: 'Home',
	components: { Tabber },
	data() {
		return {
			title: 'Hello'
		};
	},
	onLoad() {},
	mounted() {
		this.tabberMaintenance(); // 获取导航栏数据
	},
	methods: {
		...mapMutations(['getTel', 'changeTabberIndex']),
		...mapActions(['tabberMaintenance']),
		djClick() {
			uni.setStorageSync('phone', 15192800023);
			this.getTel('15192800023');
		},
		// 点击导航栏切换
		changeTabber(e) {
			console.log('点击导航栏触发---', e);
			this.changeTabberIndex(e);
			this.$refs.uTips.show({
				title: '铁马冰河入梦来',
				type: 'success',
				duration: '2300'
			});
			this.$refs.uToast.show({
				title: '登录成功',
				type: 'success',
				duration: 1500,
				url: '/pages/loginRigster/login/login',
				params: {
					id: 1,
					menu: 3
				}
			});
		}
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	computed: {
		...mapState({
			phone: modules => modules.loginInfo.phone,
			// tabberIndex: modules => modules.tabber.tabberIndex,
			tabberList: modules => modules.tabber.tabberList
		}),
		// 从store获取底部导航栏的index，改变值的时候需要set
		tabberIndex: {
			get() {
				return this.$store.state.tabber.tabberIndex;
			},
			set(e) {
				this.$store.state.tabber.tabberIndex = e;
			}
		}
	}
};
</script>

<style>
.title {
	color: #8f8f94;
}
</style>
